<template>
  <!--车辆管理-->
  <div class="policy">
    <el-card class="box-card" style="margin-top: 35px;border-radius: 20px;">
      <div class="policy-header">
        <div  style="display: flex;align-items: center">
          <h2>Banner管理</h2>
          <el-button @click="add" icon="el-icon-plus" style="margin-left: 20px;background: #699FF3;color: #fff;border-radius: 10px"></el-button>
        </div>

        <div class="search-box" style="display: flex;align-items: center">
          <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.title" placeholder="请输入banner名称" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-select v-model="form.location" placeholder="选择位置" clearable @clear="getList">
                <el-option label="首页" :value="1"></el-option>
                <el-option label="心理电台" :value="2"></el-option>
                <el-option label="心理测评" :value="3"></el-option>
                <el-option label="数字附能" :value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;align-items: center;margin-bottom: 0">
              <el-button style="background: #699FF3;color: #fff;border-radius: 24px;margin-bottom: 0" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--       列表-->
      <div class="list">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{background:'#F4F4F4',border:'none'}"
        >
          <el-table-column prop="applicationIcon" label="Banner图片" align="center">
            <template slot-scope="scope">
              <el-avatar size="large" :src="scope.row.image"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="banner标题"
            align="center"
          />
          <el-table-column
            label="banner位置"
            align="center"
          >
            <template slot-scope="scope">
              <div>{{scope.row.location==1?'首页':scope.row.location==2?'心理电台':scope.row.location==3?'心理测评':scope.row.location==4?'数字附能':''}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="跳转地址"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.redirect_to.short_link&&scope.row.redirect_to.extra_data">{{scope.row.redirect_to.short_link}}?{{scope.row.redirect_to.extra_data}}</div>
              <div v-else-if="scope.row.redirect_to.short_link">{{scope.row.redirect_to.short_link}}</div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sequence"
            label="Banner排序"
            align="center"
          />

          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-edit" style="color: #67C23A;" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" icon="el-icon-delete" style="color: red;" @click="details(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging-device">
        <Pagingdevice
          ref="paging"
          :total-count="totalCount"
          :current_page="current_page"
          :per_page="per_page"
          @select="select"
          @changep="changep"
        />
      </div>
    </el-card>
    <AddPopup v-if="isShow" @closeAlert="closeAlert" :state="state" :item="item"></AddPopup>
  </div>

</template>

<script>
import {bannerList,bannerDel,imgURL} from "@/api"

import Pagingdevice from '@/components/Pagingdevice'
import Navdar from '@/components/navbar/navbar'
import AddPopup from "./components/AddPopup";
export default {
  name: "carsManage",
  components: {
    Pagingdevice,
    Navdar,
    AddPopup
  },
  data() {
    return {
      title:'Banner管理 Banner management ',
      state: 'add',
      isShow: false,
      imgURL,
      form:{
        title:'',
        location:''
      },
      options:[
        {label:'状态一',value:'1'},
        {label:'状态二',value:'2'}
      ],
      item:{},
      tableData:[],
      totalCount: 0,
      current_page: 1,
      per_page:15,
      userPhone:'',
      nickName:'',
      AddCarLibraryBtn:false,
      EditDelCarLibraryBtn:false,
    };
  },
  mounted() {
    this.getList()
    // 按钮权限判断
    // setTimeout(()=> {
    //   this.getBtns()
    //
    // },500)
  },
  methods: {
    // 按钮权限
    getBtns(){
      let UserManager = JSON.parse(sessionStorage.getItem('BtnPermission'))
      for (var i = 0; i < UserManager.length; i++) {
        var name = UserManager[i];
        // console.log(name);
        switch (name) {
          case 'AddCarLibrary':
            this.AddCarLibraryBtn=true;
            break;
          case 'EditDelCarLibrary':
            this.EditDelCarLibraryBtn=true;
            break;
        }
      }
    },

    // 列表
    async getList(){
      await bannerList({
        page:this.current_page,
        ...this.form
      }).then(res=>{
        // console.log(res)
        if (res.code==10000){
          this.tableData = res.data;
          this.totalCount=res.meta.total

        }
      })
    },
    // 搜索
    search(){
      this.current_page=1
      this.getList()
    },
    // 添加
    add(){
      this.state = 'add'
      this.isShow = true
    },
    // 编辑
    edit(item){
      this.state = 'edit'
      this.item = item
      this.isShow = true
    },
    // 关闭弹窗
    closeAlert(bool){
      this.isShow = bool
      this.getList()
    },
    // 删除
    async details(item){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await bannerDel(item.id,{}).then(res=>{
          if(res.code == 10000){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            let totalPage = Math.ceil((this.totalCount - 1) / this.per_page)
            let currentPage =this.current_page > totalPage ? totalPage : this.current_page
            this.current_page = currentPage < 1 ? 1 : currentPage
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    select(num,data){
      this.current_page = num;
      this.per_page = data;
      this.getList()
    },
    changep(num){
      this.current_page = num;
      this.getList()
    }
  }
};
</script>

<style scoped lang="scss">
.policy {
  font-size: 14px;
  padding: 0 80px;
  box-sizing: border-box;
  color: #000;
  &-header {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .class-box {

      //float: right;
      margin-bottom: 5px;
    }
    .add-btn {
      width: 100px;
      height: 40px;
      border-radius: 5px;
      background: #1184e6;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
    }
    .add-btn {
      margin-left: 80px;
    }
  }
  .list {
    margin: 30px;
    text-align: center;
  }
  .paging-device {
    margin: 30px;

  }
}

</style>
<style>
.el-table__header-wrapper{
  border-radius: 10px;
}
/*.btn-prev{*/
/*  width: 24px!important;*/
/*  height: 24px!important;*/
/*  background: #FFFFFF;*/
/*  border-radius: 50%;*/
/*  box-shadow: 1px 2px 8px 0px rgba(206, 206, 207, 0.5);*/
/*  padding: 0;*/
/*}*/
</style>



